<template>
  <div ref="fullscreenElement">
  	<div class="header">
  		 <h3>处理异常答题卡</h3>
  		 <p>
  			 <b @click="toggleFullscreen"><img src="../../assets/image/school/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
  			 <em @click="$router.push('/exceptionhandling')">退出</em>
  		 </p>
  	</div>
  	<div class="cropperBox">
  		 <div class="cropperImageset" ref="scrollableDiv">
			 <div class="cardczpk">
				 <span>答题卡操作</span>
				 <div>
					 <i>旋转</i>
					 <b @click="cardabsore=true">排序</b>
				 </div>
			 </div>
  			<div>
  			  <canvas ref="canvas" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"></canvas>
  			</div>
  		 </div>
  		 <div class="uploadcardInfo">
  			 <h3>{{detailinfo.examName+'-'+detailinfo.examCourseName}}</h3>
  			 <ul>
  				 <li>
  					 <span>试题题号：</span>{{detailinfo.questionName}}
  				 </li>
  				 <li>
  					 <span>试题密号：</span>{{detailinfo.questionId}}
  				 </li>
				 <li>
				   	<span>切图数量：</span>{{detailinfo.paperCutImages.length}}
				 </li>
  				 <li>
  					 <span>标记类型：</span>{{ detailinfo.reviewExceptionStatus==0?'无异常':detailinfo.reviewExceptionStatus==1?'学科错误':detailinfo.reviewExceptionStatus==2?'题号错误':detailinfo.reviewExceptionStatus==3?'图像不完整':detailinfo.reviewExceptionStatus==4?'超出作答区':detailinfo.reviewExceptionStatus==5?'字迹看不清':'其他异常' }}
  				 </li>
  				 <li>
  					<span>标记教师：</span>{{detailinfo.markTeacher}}
  				 </li>
  				 <li>
  					<span>标记时间：</span>{{detailinfo.markTime}}
  				 </li>
  			 </ul>
  			 <h3 style="border:none;border-top:solid 1px #D8E4F0;margin-top:25px">处理方法</h3>
  			 <!-- <ul>
  				 <li>
  					 <span>变更状态：</span>
  					 <el-select v-model="examclassify" placeholder="已处理/未处理">
						 <el-option
						   v-for="item in examclassifylist"
						   :key="item.id"
						   :label="item.name"
						   :value="item.id">
						 </el-option>
  					  </el-select>
  				 </li>
  			 </ul> -->
			 <!-- {{detailinfo.paperCutImages}}
			 {{this.selectedAreas}} -->
  			 <div class="qtbuttonset">
  				 <em v-for="item in detailinfo.paperCutImages" @click="recropper(item)">编号{{item.screenshotNo}}-重新切图</em>
  				 <em @click="restartupload=true">重新上传答题卡</em>
  			 </div>
  			 <div class="examboxbutton1">
  				 <el-button @click="submitmodel">提交</el-button>
  				 <el-button @click="skipStatus">跳过</el-button>
  			 </div>
  		 </div>
  	</div>
	<!-- 重新上传 -->
	<div class="uploadcadContent" v-if="restartupload">
		<div class="uploadcad">
			<h3>重新上传答题卡</h3>
			<ul>
				<li v-for="(item,index) in detailinfo.paperImages">
					<img :src="item.filePath" alt="">
					<p><em @click="showViewer(index)">查看</em></p>
					<div>
						第{{item.page==1?'一':item.page==2?'二':item.page==3?'三':item.page==4?'四':item.page==5?'五':'六'}}页 拖入图像替换或点击<span>重新上传</span>
					</div>
				</li>
			</ul>
			<div class="buttonreupload">
				<button>保存</button>
				<b @click="restartupload=false">返回</b>
			</div>
		</div>
	</div>
	<viewer
	 class="viewer"
	 ref="viewer"
	 :images="detailinfo.paperImages"
	 :shown="viewerVisible"
	 @inited="viewerInited"
	>
	 <template #default="{ images }">
	   <img
		 v-for="(image, index) in images"
		 :key="index"
		 :src="image.filePath"
		 style="display: none;"
	   >
	 </template>
	</viewer>
	<!-- 排序 -->
	<div class="uploadcadContent" v-if="cardabsore">
		<div class="uploadcad">
			<h3>答题卡操作-排序</h3>
			<draggable v-if="detailinfo.paperImages.length>0" :list="detailinfo.paperImages" :animation="100" :forceFallback="true"  @end="onEnd" @change="onMoveCallback" class="imgmove">
			     <transition-group>
			       <div v-for="(item, index) in detailinfo.paperImages" :key="item.id" class="boxsetdelecte" v-if="detailinfo.paperImages.length > 0">
						<b>{{index+1}}</b>
			         <img :src="item.filePath" alt="" style="width:200px;border: 1px solid #295cff80;">
					 <span><img src="../../assets/image/school/drag.png" alt="" style="width:24px;height:24px;"></span>
					 <div class="buttonboxedit">
						 <i @click="showViewer(index)">查看</i>
					 </div>
			       </div>
			     </transition-group>
			   </draggable>
			   <div class="buttonreupload" style="margin-top:20px;">
			   	<button>保存</button>
			   	<b @click="cardabsore=false">返回</b>
			   </div>
		</div>
	</div>
  </div>
</template>

<script>
import {post,get,put,del,dele} from '../../request/api.js'
import draggable from 'vuedraggable';
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      isDrawing: false,
      isResizing: false,
      isDragging: false, // 是否正在拖拽矩形
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      selectedAreas: [], // 存储所有选中的区域
      image: null, // 用于存储图片对象
      activeAreaIndex: null, // 当前选中的区域索引
      resizeHandleIndex: null, // 当前拖动的控制点索引
      overHandleIndex: null, // 当前鼠标悬停的控制点索引
      handleSize: 8, // 控制点的大小
      dragOffsetX: 0, // 拖拽偏移量 X
      dragOffsetY: 0, // 拖拽偏移量 Y
      buttonSize: 20, // 按钮大小
	  examclassify:'',
	  examclassifylist:[{name:'已处理',id:1},{name:'未处理',id:2}],
	  detailinfo:{},
	  currentIndex:1,
	  isButtonClicked:false,
	  viewerVisible: false, // 控制查看器的显示状态
	     viewerIndex: 0, // 当前查看的图片索引
		 restartupload:false,
		 cardabsore:false,
		 isFullscreen: false, // 当前是否处于全屏状态
    };
  },
  mounted() {
	  // 监听全屏状态变化
	  document.onfullscreenchange = this.handleFullscreenChange;
	   this.carddetail()
  },
  components: {
    draggable,
  },
  methods: {
	  showViewer(index) {
		// 显示查看器并跳转到指定图片
		this.$viewer.view(index);
	  },
	  viewerInited(viewer) {
		// 在 viewer 初始化后，可以通过 this.$viewer 访问 viewer 实例
		this.$viewer = viewer;
	  },
	  //跳过
	  skipStatus(){
		  let obj={
			  examCourseId:this.$route.query.examcourseid,
			  questionId:this.$route.query.questionid
		  }
		get('/paperexception/nextdetails',obj)
		.then(res=>{
			if (res.code == 200) {
				 this.detailinfo = res.data;
				 this.selectedAreas = res.data.paperCutImages.map(item => ({ ...item }));
				 this.currentIndex = res.data.paperCutImages[0].page;
				 // this.addanswerLeft=this.selectedAreas[0].x-80
				 // this.addanswerTop=this.selectedAreas[0].y+20
				 this.imageurl = res.data.paperImages[1].filePath; // 获取图片路径
				 setTimeout(()=>{
					 this.loadImage(this.imageurl); // 加载图片
				 },100)
			} else {
				this.$message.error(res.message);
			}
		})
	  },
	  // 获取异常答题卡详情
	carddetail() {
	  get('/paperexception/details', { questionCutId: this.$route.query.questionid })
		.then(res => {
			//console.info(res)
		  if (res.code == 200) {
		   this.detailinfo = res.data;
			 this.selectedAreas = res.data.paperCutImages.map(item => ({ ...item }));
			 this.currentIndex = res.data.paperCutImages[0].page;
			 this.imageurl = res.data.paperImages[1].filePath; // 获取图片路径
			 setTimeout(()=>{
				 this.loadImage(this.imageurl); // 加载图片
			 },1000)
		  } else {
			this.$message.error(res.message);
		  }
		})
	},
	// 加载图片
	loadImage(url) {
		this.canvas = this.$refs.canvas;
		    this.ctx = this.canvas.getContext('2d'); 
			
	   this.image = new Image();
	   this.image.src = url; // 设置图片路径
	   this.image.onload = () => {
		 // 设置 Canvas 宽高为图片的宽高
		 this.canvas.width = this.image.width;
		 this.canvas.height = this.image.height;
 
		 // 在 Canvas 上绘制图片
		 this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
		 this.draw()
	   };
	   this.image.onerror = () => {
		 console.error('Failed to load image:', url);
		 this.$message.error('无法加载图片，请检查图片 URL 是否正确或网络连接是否正常。');
	   };
	},
	//提交
	submitmodel(){
		//console.info(this.selectedAreas)
	},
    // 绘制所有矩形框和控制点
	recropper(con){
		this.canvas.style.cursor='crosshair'
		let ids = this.selectedAreas.map((item, index) => item.id === con.id ? index : -1).filter(index => index !== -1);
		for (let i = ids.length - 1; i >= 0; i--) {
		    this.selectedAreas.splice(ids[i], 1);
		}
		this.isButtonClicked = true
	},
    draw() {
      // 清除 Canvas
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

      // 重新绘制图片
      this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);

      // 绘制所有矩形框
      this.selectedAreas.forEach((area, index) => {
        this.ctx.strokeStyle = index === this.activeAreaIndex ? 'red' : 'blue';
        this.ctx.lineWidth = 2;
        // 绘制半透明背景
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; // 黑色透明背景
        this.ctx.fillRect(area.x, area.y, area.width, area.height);
        // 绘制矩形边框
        this.ctx.strokeRect(area.x, area.y, area.width, area.height);
        // 绘制控制点
        if (index === this.activeAreaIndex) {
          this.drawResizeHandles(area);
        }
        // 绘制按钮
		  this.drawButtons(area);
      });

      // 绘制当前正在绘制的矩形框
      if (this.isDrawing) {
		this.canvas.style.cursor='crosshair'
        this.ctx.strokeStyle = 'red';
        this.ctx.lineWidth = 2;

        // 绘制半透明背景
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; // 黑色透明背景
        this.ctx.fillRect(
          this.startX,
          this.startY,
          this.currentX - this.startX,
          this.currentY - this.startY
        );

        // 绘制矩形边框
        this.ctx.strokeRect(
          this.startX,
          this.startY,
          this.currentX - this.startX,
          this.currentY - this.startY
        );
      }
    },

    // 绘制控制点
    drawResizeHandles(area) {
      const handles = this.getResizeHandles(area);
      handles.forEach((handle, index) => {
        this.ctx.fillStyle = 'white';
        this.ctx.strokeStyle = 'black';
        this.ctx.lineWidth = 1;
        this.ctx.fillRect(handle.x - this.handleSize / 2, handle.y - this.handleSize / 2, this.handleSize, this.handleSize);
        this.ctx.strokeRect(handle.x - this.handleSize / 2, handle.y - this.handleSize / 2, this.handleSize, this.handleSize);
      });
    },

    // 绘制按钮
   drawButtons(area) {
     const buttonWidth = 60;
     const buttonHeight = 24;
   
     // 计算按钮的位置
     const buttonX = area.x + area.width - buttonWidth * 2 - 10; // 两个按钮的总宽度加上间距
     const buttonY = area.y + area.height - buttonHeight - 10; // 距离选框底部的间距
   
     // 绘制删除按钮
     this.ctx.fillStyle = '#EC555A'; // 红色背景
     this.ctx.fillRect(buttonX + buttonWidth + 10, buttonY + 35, buttonWidth, buttonHeight); // 间距为10
     this.ctx.fillStyle = 'white'; // 白色文本
     this.ctx.font = "12px Microsoft YaHei";
     this.ctx.fillText('删除', buttonX + buttonWidth + 28, buttonY + 52); // 调整文本位置
   },

    // 获取矩形框的控制点
    getResizeHandles(area) {
      const { x, y, width, height } = area;
      return [
        { x: x, y: y }, // 左上角
        { x: x + width / 2, y: y }, // 上边中点
        { x: x + width, y: y }, // 右上角
        { x: x + width, y: y + height / 2 }, // 右边中点
        { x: x + width, y: y + height }, // 右下角
        { x: x + width / 2, y: y + height }, // 下边中点
        { x: x, y: y + height }, // 左下角
        { x: x, y: y + height / 2 }, // 左边中点
      ];
    },

    // 检查鼠标是否在控制点上
    getResizeHandleIndex(area, mouseX, mouseY) {
      const handles = this.getResizeHandles(area);
      for (let i = 0; i < handles.length; i++) {
        const handle = handles[i];
        if (
          mouseX >= handle.x - this.handleSize / 2 &&
          mouseX <= handle.x + this.handleSize / 2 &&
          mouseY >= handle.y - this.handleSize / 2 &&
          mouseY <= handle.y + this.handleSize / 2
        ) {
          return i;
        }
      }
      return -1;
    },

    // 检查鼠标是否在矩形框内部
    isMouseInArea(area, mouseX, mouseY) {
      return (
        mouseX >= area.x &&
        mouseX <= area.x + area.width &&
        mouseY >= area.y &&
        mouseY <= area.y + area.height
      );
    },

    // 检查鼠标是否点击了按钮
    isMouseOnButton(area, mouseX, mouseY) {
      const buttonWidth = 60; // 按钮宽度
      const buttonHeight = 24; // 按钮高度
    
      // 计算按钮的位置（基于矩形框的右下角）
      const buttonX = area.x + area.width - buttonWidth * 2 - 10; // 两个按钮的总宽度加上间距
      const buttonY = area.y + area.height - buttonHeight - 10; // 距离选框底部的间距
    
      // 检查删除按钮
      if (
        mouseX >= buttonX + buttonWidth + 10 && // 间距为10
        mouseX <= buttonX + buttonWidth * 2 + 10 &&
        mouseY >= buttonY + 35 &&
        mouseY <= buttonY + 35 + buttonHeight
      ) {
        return 'delete';
      }
    
      return null;
    },

    // 鼠标按下事件
    handleMouseDown(e) {
		if(!this.isResizing){
			this.canvas.style.cursor='crosshair'
			const mouseX = e.offsetX;
			const mouseY = e.offsetY;
			
			
			// 检查是否点击了某个矩形框的控制点
			for (let i = 0; i < this.selectedAreas.length; i++) {
			  const area = this.selectedAreas[i];
			  const handleIndex = this.getResizeHandleIndex(area, mouseX, mouseY);
			  if (handleIndex !== -1) {
			    this.isResizing = true;
			    this.activeAreaIndex = i;
			    this.resizeHandleIndex = handleIndex;
			    this.startX = mouseX;
			    this.startY = mouseY;
			    return;
			  }
			
			  // 检查是否点击了矩形框内部
			  if (this.isMouseInArea(area, mouseX, mouseY)) {
			    this.isDragging = true;
			    this.activeAreaIndex = i;
			    this.dragOffsetX = mouseX - area.x;
			    this.dragOffsetY = mouseY - area.y;
			    return;
			  }
			
			  // 检查是否点击了按钮
			     const buttonAction = this.isMouseOnButton(area, mouseX, mouseY);
			     if (buttonAction === 'delete') {
			       //console.log('Deleting area:', area);
			       this.deleteArea(i);
			       return;
			     }
			}
			
			// 如果没有点击控制点或矩形框内部，则开始绘制新矩形框
			if (this.isButtonClicked) {
				this.isDrawing = true;
				this.startX = mouseX;
				this.startY = mouseY;
				this.currentX = mouseX;
				this.currentY = mouseY;
			}
		}
    },

    // 鼠标移动事件
    handleMouseMove(e) {
      const mouseX = e.offsetX;
      const mouseY = e.offsetY;

	 // 检测鼠标是否悬停在按钮上
	  const buttonWidth = 60;
	  const buttonHeight = 24;
	  const area = this.selectedAreas[this.activeAreaIndex];
	  if (area) {
	    const buttonX = area.x + area.width - buttonWidth * 2 - 10;
	    const buttonY = area.y + area.height - buttonHeight - 10;
	
	    // 检查鼠标是否悬停在编辑按钮上
	    if (
	      mouseX >= buttonX + 10 &&
	      mouseX <= buttonX + 10 + buttonWidth &&
	      mouseY >= buttonY + 35 &&
	      mouseY <= buttonY + 35 + buttonHeight
	    ) {
	      this.canvas.style.cursor = 'pointer';
	      return;
	    }
	
	    // 检查鼠标是否悬停在删除按钮上
	    if (
	      mouseX >= buttonX + buttonWidth + 20 &&
	      mouseX <= buttonX + buttonWidth + 20 + buttonWidth &&
	      mouseY >= buttonY + 35 &&
	      mouseY <= buttonY + 35 + buttonHeight
	    ) {
	      this.canvas.style.cursor = 'pointer';
	      return;
	    }
	  }
	
	  // 如果鼠标没有悬停在按钮上，恢复默认光标样式
	  this.canvas.style.cursor = 'pointer';

      // 检测鼠标是否悬停在控制点上
      let overHandleIndex = null;
      if (this.activeAreaIndex !== null) {
        const area = this.selectedAreas[this.activeAreaIndex];
        overHandleIndex = this.getResizeHandleIndex(area, mouseX, mouseY);
      }

      // 动态设置 cursor 样式
      if (overHandleIndex !== null && overHandleIndex !== -1) {
        this.canvas.style.cursor = 'pointer';
        this.overHandleIndex = overHandleIndex;
      } else if (this.isDragging) {
		  this.canvas.style.cursor='crosshair';
      } else {
        this.canvas.style.cursor = 'pointer';
        this.overHandleIndex = null;
      }

      if (this.isResizing) {
        // 调整矩形框大小
        const area = this.selectedAreas[this.activeAreaIndex];
        const handleIndex = this.resizeHandleIndex;
        const { x, y, width, height } = area;

        switch (handleIndex) {
          case 0: // 左上角
            area.x = mouseX;
            area.y = mouseY;
            area.width = x + width - mouseX;
            area.height = y + height - mouseY;
            break;
          case 1: // 上边中点
            area.y = mouseY;
            area.height = y + height - mouseY;
            break;
          case 2: // 右上角
            area.y = mouseY;
            area.width = mouseX - x;
            area.height = y + height - mouseY;
            break;
          case 3: // 右边中点
            area.width = mouseX - x;
            break;
          case 4: // 右下角
            area.width = mouseX - x;
            area.height = mouseY - y;
            break;
          case 5: // 下边中点
            area.height = mouseY - y;
            break;
          case 6: // 左下角
            area.x = mouseX;
            area.width = x + width - mouseX;
            area.height = mouseY - y;
            break;
          case 7: // 左边中点
            area.x = mouseX;
            area.width = x + width - mouseX;
            break;
        }
      } else if (this.isDragging) {
        // 拖拽矩形框
        const area = this.selectedAreas[this.activeAreaIndex];
        area.x = mouseX - this.dragOffsetX;
        area.y = mouseY - this.dragOffsetY;
      } else if (this.isDrawing) {
		  this.canvas.style.cursor = "crosshair"
        // 绘制新矩形框
        this.currentX = mouseX;
        this.currentY = mouseY;
      }

      // 重新绘制 Canvas
      this.draw();
    },

    // 鼠标松开事件
    handleMouseUp() {
      if (this.isDrawing) {
		  this.isButtonClicked = false
        // 完成绘制新矩形框
        const newArea = {
          x: Math.min(this.startX, this.currentX),
          y: Math.min(this.startY, this.currentY),
          width: Math.abs(this.currentX - this.startX),
          height: Math.abs(this.currentY - this.startY),
        };
        this.selectedAreas.push(newArea);
        this.isDrawing = false;
        this.activeAreaIndex = this.selectedAreas.length - 1; // 设置为最后一个区域
      } else if (this.isResizing) {
        // 完成调整矩形框大小
        this.isResizing = false;
        this.activeAreaIndex = null;
        this.resizeHandleIndex = null;
      } else if (this.isDragging) {
        // 完成拖拽矩形框
        this.isDragging = false;
        this.activeAreaIndex = null;
      }
      this.canvas.style.cursor = 'pointer'; // 恢复默认样式
    },

    // 编辑区域
    editArea(area) {
		alert('ddddd')
      //console.log('Editing area:', area);
      // 实现编辑逻辑
    },

    // 删除区域
    deleteArea(index) {
      //console.log('Deleting area at index:', index);
      this.selectedAreas.splice(index, 1); // 删除选中的区域
      this.activeAreaIndex = null; // 清空当前选中的区域
      this.draw(); // 重新绘制 Canvas
    },
	// 切换全屏
	toggleFullscreen() {
	  if (!document.fullscreenEnabled) {
	    alert("您的浏览器不支持全屏功能！");
	    return;
	  }
	
	  if (this.isFullscreen) {
	    // 退出全屏
	    document.exitFullscreen();
		this.$refs.fullscreenElement.style.overflow = 'auto';
	  } else {
	    // 进入全屏
	    this.$refs.fullscreenElement.requestFullscreen();
		this.$refs.fullscreenElement.style.overflow = 'auto';
	  }
	},
	// 处理全屏状态变化
	handleFullscreenChange() {
	  this.isFullscreen = !!document.fullscreenElement;
	}
  },
};
</script>

<style scoped>
canvas {
  /* border: 1px solid #000; */
  cursor: crosshair;
}
.header{
	padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	min-width:100%;padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 49px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	height:calc(100vh - 49px);
	background:#fff;
	position:relative;
	width:370px;
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.qtbuttonset{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:14px;
}
.qtbuttonset em{
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size:14px;
	color:#fff;
	text-align: center;
	line-height: 34px;
	margin:8px;
	cursor: pointer;
}
.qtbuttonset em:last-child{
	width: 124px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color:#295CFF;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal;
	font-size:18px;
}
.uploadcardInfo ul li{
	display: flex;
	align-items: center;
	color:#8E96A4;
	font-size:16px;
	padding:0 24px;
	margin-top:24px;
}
.uploadcardInfo ul li span{
	color:#8E96A4;
	width:100px;
}
.uploadcardInfo ul li >>> .el-input__inner{
	border-radius:10px;
}
.uploadcardInfo ul li >>> .el-textarea{
	width:calc(100% - 100px)
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 49px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 49px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 370px);
	height:calc(100vh - 49px);
	overflow:scroll;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
  .cardczpk{
	  box-sizing: border-box;
	  width: 174px;
	  height: 90px;
	  background: #FFFFFF;
	  box-shadow: 0 4px 16px 0 #5572921a;
	  border-radius: 10px;
	  position:fixed;
	  left:24px;
	  top:72px;
	  padding:14px;
  }
  .cardczpk span{
	  font-size:14px;
	  color:#2A303B;
  }
  .cardczpk div{
	  display: flex;
	  align-items: center;
  }
  .cardczpk div i,.cardczpk div b{
	  box-sizing: border-box;
	  font-style: normal;
	  width: 66px;
	  height: 34px;
	  background: #295cff1a;
	  border: 1px solid #295cff1a;
	  border-radius: 10px;
	  font-size:14px;
	  color:#295CFF;
	  line-height:34px;
	  padding-left:10px;
	  cursor: pointer;
	  margin-top:5px;
  }
  .cardczpk div i{
	  background:url(../../assets/image/school/roate.png) no-repeat 43px center;
	  background-size:13px 14px
  }
  .cardczpk div b{
	  margin-left:14px;
	  background:url(../../assets/image/school/px.png) no-repeat 43px center;
	  background-size:13px 14px
  }
  .uploadcadContent{
	   position:fixed;
	   width:100%;
	   height:100%;
	   background:rgba(0,0,0,0.7);
	   left:0;
	   top:0;
  }
  .uploadcad{
	  background: #FFFFFF;
	  box-shadow: 0 4px 16px 0 #5572921a;
	  border-radius: 10px;
	  padding:25px 0 25px 25px;
	  position:fixed;
	  left:50%;
	  top:50%;
	  transform: translate(-50%,-50%);
	  max-width:875px;
	  max-height:500px;
  }
  .uploadcad ul{
	  display: flex;
	  align-items: center;
	  flex-wrap: wrap;
  }
  .uploadcad ul li{
	  width: 200px;
	  height: 140px;
	  background: #33333d;
	  margin-right:25px;
	  position:relative
  }
  .uploadcad ul li img{
	  width:100%;
	  border: 1px solid #295cff80;
  }
  .uploadcad ul li div{
	  font-size:12px;
	  text-align: center;
  }
  .uploadcad ul li div span{
	  padding-top:12px;
	  color:#295CFF;
	  cursor:pointer;
  }
  .uploadcad h3{
	  font-weight:normal;
	  font-size:18px;
	  margin-bottom:15px;
  }
  .uploadcad ul li p{
	  width:100%;
	  height:100%;
	  position:absolute;
	  left:0;
	  top:0;
	  background:rgba(0,0,0,0.3);
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  .uploadcad ul li em{
	  width: 52px;
	  height: 24px;
	  background: #ffffff;
	  border-radius: 12px;
	  font-size: 16px;
	  color: #295CFF;
	  text-align: justify;
	  line-height:24px;
	  text-align: center;
	  font-style:normal;
	  cursor: pointer;
  }
  .buttonreupload{
	  margin-top:50px;
  }
  .buttonreupload button,.buttonreupload b{
	  display: inline-block;
	 width: 124px;
	 height: 34px;
	 border-radius: 10px; 
	 border: 1px solid #295CFF;
	 text-align: center;
	 line-height:34px;
	 font-size:14px;
	 cursor: pointer;
  }
  .buttonreupload button{
	  background: #295CFF;
	  color:#fff;
	  margin-right:24px;
  }
  .buttonreupload b{
	  color:#295CFF;
	  background: #F2F6FB;
  }
  .boxsetdelecte{
  	position:relative;
  }
  .boxsetdelecte span{
  	position:absolute;
  	left:-24px;
  	top:24px;
  }
  .buttonboxedit{
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding-top:5px;
	width:200px;
	height:140px;
	background:rgba(0,0,0,0.5);
	position:absolute;
	left:-12px;
	top:35px;
  }
  .buttonboxedit i{
  	width: 52px;
  	height: 24px;
  	background: #fff;
  	border-radius: 12px;
  	font-size: 16px;
  	color: #295CFF;
  	text-align: justify;
  	line-height:24px;
  	text-align: center;
  	font-style:normal;
  	cursor: pointer;
  }
  .boxsetdelecte b{
  	display: block;
  	text-align: center;
  	font-size:20px;
  	padding-bottom:6px;
  }
.imgmove span{
	display: flex;
	align-items: center;
	margin:0 13px;
}
.imgmove span div{
	margin:0 13px;
}
</style>